<template>
	<view class="">
		<h-dark :title="t('item.titleContract')"></h-dark>
		<view class="my-[30rpx] mx-[30rpx]">
			<view class="content leading-loose" v-html="data.content"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getContract } from '@/api/item'
	import { t, replaceStr } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('item.titleContract') })
	const data = reactive({
		content: ''
	})
	const getData = async (id : number) => {
		const res = await getContract({ id: id })
		data.content = res.content;

		let cycle = res.cycle + ' ' + t('item.hour');
		if (res.type == 1 || res.type == 2) {
			cycle = res.cycle + ' ' + t('item.days');
		}

		let y_img = '<img src="' + res.contract_y_logo + '" style="width:120px;position: absolute;left: 30px;margin-top: -30px;">'
		let b_img = '<img src="' + res.contract_b_logo + '" style="width:120px;position: absolute;left: 30px;margin-top: -30px;">'

		data.content = replaceStr(data.content, '{type}', t("item.type" + res.type))
		data.content = replaceStr(data.content, '{cycle}', cycle)

		data.content = replaceStr(data.content, '{y_img}', y_img)
		data.content = replaceStr(data.content, '{b_img}', b_img)
	}
	onLoad((options : any) => {
		getData(options.id)
	})
</script>

<style lang="scss">
	page {
		background-color: #4E55AF;
	}

	.content {
		::v-deep table {
			border-collapse: collapse;
		}

		::v-deep td {
			padding: 0 5px;
			border: 1px solid #EAEAEA;
		}
	}
</style>